
.tool-svg {
    display: inline;
    position: absolute;
    width: 100%;
    height: 100%;

    &.hidden {
        display: none;
    }

    &#brush-select-svg {
        >circle {
            fill: rgba(255, 102, 0, 0.2);
            stroke: #f60;
            stroke-width: 1;
            stroke-dasharray: 5, 5;
        }
    }

    &#rect-select-svg {
        >rect {
            fill: none;
            stroke: #f60;
            stroke-width: 1;
            stroke-dasharray: 5, 5;
        }
    }

    &#lasso-select-svg {
        >polygon {
            fill: none;
            stroke-width: 1;
            stroke-dasharray: 5, 5;
            stroke-dashoffset: 0;
        }
    }

    &#polygon-select-svg {
        >polyline {
            fill: none;
            stroke-width: 1;
            stroke-dasharray: 5, 5;
            stroke-dashoffset: 0;
        }
    }

    &#measure-tool-svg {
        >#measure-line-bottom {
            stroke: black;
            stroke-width: 6;
        }

        >#measure-line-top {
            stroke: white;
            stroke-width: 2;
        }

        >#measure-line-start, >#measure-line-end {
            fill: white;
            stroke: black;
            stroke-width: 2;
            r: 5;
        }
    }
}
